<template>
  <a-table
    :pagination="pagination"
    :locale="{emptyText:'暂无数据'}"
    :columns="columns" :data-source="dataList" bordered size="small"
    :scroll="{ x: 1300 }"
    @change="onPageChange"
  >
    <template  #workTicketCode="{ record }">
      <a @click="toDetailPage(record.id)">{{ record.workTicketCode }}</a>
    </template>
    <template #action="{ record }">
      <span>
        <a @click="toUpdatePage(record.id)">修改</a>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定要删除吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteWorkTicket(record.id)"
        >
          <a href="#">删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a target="_blank" :href="exportWordUrl+'/'+record.id">Word</a>
      </span>
    </template>
  </a-table>
</template>
<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from 'vue'
import { WorkTicketApi } from './js/work-ticket-api'
import { WorkTicketModel } from './js/work-ticket-model'
import { message } from 'ant-design-vue'
import { ResultModel } from '@/common/result.model'

const columns = [
  {
    fixed: 'left',
    title: '工作票编号',
    key: 'workTicketCode',
    width: 270,
    ellipsis: true,
    slots: { title: 'customTitle', customRender: 'workTicketCode' }
  },
  {
    title: '工作场所名称',
    className: 'column-workspace',
    dataIndex: 'workspace',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    ellipsis: true
  },
  {
    title: '负责人',
    dataIndex: 'workLeader',
    ellipsis: true
  },
  {
    title: '操作',
    fixed: 'right',
    slots: { customRender: 'action' },
    key: 'action',
    width: 160
  }
]

export default defineComponent({
  setup () {
    const instance = getCurrentInstance()
    const pagination = ref({ total: 0, pageSize: 15, current: 1 })
    const dataList = ref([])
    const pageQuery = (workTicketCode = null, username = null) => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      WorkTicketApi.query(pagination.value.current, pagination.value.pageSize, workTicketCode, username).then(response => {
        console.log(response)
        if (ResultModel.isSuccessPageInfo(response)) {
          // eslint-disable-next-line no-return-assign
          response.data && response.data.dataList && response.data.dataList.forEach((item: WorkTicketModel) => item.key = item.id)
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = response.data.dataList
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          pagination.value.total = response.data.total
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          console.log('工作票结果：', dataList.value)
        } else {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = []
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          pagination.value.total = 0
        }
      })
    }
    const onPageChange = (page: any) => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      pagination.value.current = page.current
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      pagination.value.pageSize = page.pageSize
      pageQuery()
    }
    pageQuery()
    const deleteWorkTicket = (id: string) => {
      WorkTicketApi.deleteWorkTicket(id).then(response => {
        if (ResultModel.isSuccess(response)) {
          message.success({ content: '删除成功！' })
          pageQuery()
        } else {
          message.error({ content: '删除失败！' })
        }
      })
    }
    const exportWordUrl = WorkTicketApi.exportWord()
    const toUpdatePage = (id: string) => {
      if (instance && instance.proxy && instance.proxy.$root && instance.proxy.$root.$router) {
        instance.proxy.$root.$router.push('/work-ticket/work-ticket/form/' + id)
      }
    }
    const toDetailPage = (id: string) => {
      if (instance && instance.proxy && instance.proxy.$root && instance.proxy.$root.$router) {
        instance.proxy.$root.$router.push('/work-ticket/work-ticket/form/' + id)
      }
    }
    return {
      dataList,
      pagination,
      columns,
      pageQuery,
      onPageChange,
      toUpdatePage,
      toDetailPage,
      exportWordUrl,
      deleteWorkTicket
    }
  }
})
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
